<%--
  Created by IntelliJ IDEA.
  User: 陌·笙
  Date: 2018-12-14
  Time: 15:00
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" isELIgnored="false" %>
<html>
<head>
    <title>销售管理</title>
    <jsp:include page="/comm/tag.jsp"/>
    <script>
        $(function () {
            $("#mytable").bootstrapTable({
                url:"/kucun/showRepertory",
                height:370,
                pageSize:5,
                pageNumber:1,
                pageList:[2,4,5],
                //启用分页，但是默认情况下，是客户端分页的
                pagination:true,
                sidePagination:'server',
                queryParams:function(params){
                    var temp = {  //这里的键的名字和控制器的变量名必须一直，这边改动，控制器也需要改成一样的
                        limit: params.limit,  //页面大小
                        offset: params.offset, //页码
                        repertoryName:$("[name='repertoryName']").val(),
                        typeId:$("[name='typeId']").val(),
                        firmId:$("[name='firmId']").val(),
                    };
                    return temp;
                },
                locale:'zh-CN',//中文支持,
                toolbar:'#top',
                columns:[
                    {field:"repertoryId",title:"商品编号",align:"center"},
                    {field:"repertoryName",title:"商品名称",align:"center"},
                    {field:"model",title:"手机型号",align:"center"},
                    {field:"type.iptypeName",title:"手机类别",align:"center"},
                    {field:"repertoryNum",title:"商品数量",align:"center"},
                    {field:"presetPrice",title:"价钱",align:"center"},
                    {field:"repertoryColor",title:"商品颜色",align:"center"},
                    {field:"repertoryRemark",title:"商品备注",align:"center"},
                    {field:"firm.firmName",title:"生产厂商",align:"center"},
                    {
                        title:"操作",
                        align:"center",
                        formatter:function(value,row,index){
                            return " <button class=\"btn btn-danger\" onclick=\"show('"+index+"')\" > <span class=\"glyphicon glyphicon-plus\"></span>&nbsp;&nbsp;购买</button>"
                        }
                    },
                ]
            });
            $.ajax({
                url:"/role/showfirm",
                type:"get",
                success:function(data){
                    $.each(data,function(){
                        var adds=$("<option value='"+this.firmId+"'>"+this.firmName+"</option>");
                        $(".s").append(adds);
                    });
                }
            })
            $.ajax({
                url:"/type/showType",
                type:"get",
                success:function(data){
                    $.each(data,function(){
                        var adds=$("<option value='"+this.iptypeid+"'>"+this.iptypeName+"</option>");
                        $(".k").append(adds);
                    });
                }
            });
        })
        function  cha(){//查询
            var opts = $("#mytable").bootstrapTable("getOptions") ;
            var repertoryName=$("[name='repertoryName']").val();
            var typeId=$("[name='typeId']").val();
            var firmId=$("[name='firmId']").val();
            var limit = opts.pageSize ;
            var offset = (opts.pageNumber-1) * limit;
            $.ajax({
                url:"/kucun/showRepertory",
                type:"get",
                data:{"repertoryName":repertoryName,"typeId":typeId,'firmId':firmId,'limit':limit,'offset':offset},
                success:function(data){
                    $("#mytable").bootstrapTable("load",data);
                }
            })
        }
        $(function(){
            $("#xiaoshou").bootstrapTable({
                url:"/xiaoshou/showmarket",
                height:320,
                pageSize:4,
                pageNumber:1,
                pageList:[2,3,4],
                //启用分页，但是默认情况下，是客户端分页的
                pagination:true,
                sidePagination:'server',
                queryParams:function(params){
                    var temp = {  //这里的键的名字和控制器的变量名必须一直，这边改动，控制器也需要改成一样的
                        limit: params.limit,  //页面大小
                        offset: params.offset, //页码
                    };
                    return temp;
                },
                locale:'zh-CN',//中文支持,
                toolbar:'#top',
                columns:[
                    {field:"repertory.repertoryId",title:"商品编号",align:"center"},
                    {field:"repertory.repertoryName",title:"商品名称",align:"center"},
                    {field:"repertory.model",title:"手机型号",align:"center"},
                    {field:"marketNum",title:"商品数量",align:"center"},
                    {field:"repertory.presetPrice",title:"价钱",align:"center"},
                    {field:"repertory.repertoryColor",title:"商品颜色",align:"center"},
                    {field:"totalPrice",title:"总金额",align:"center"},
                    {field:"marketRemark",title:"商品备注",align:"center"},
                    {
                        title:"操作",
                        align:"center",
                        formatter:function(value,row,index){
                            return " <button class=\"btn btn-danger\" onclick=\"del('"+row.marketid+"','"+index+"')\" > <span class=\"glyphicon glyphicon-trash\"></span>&nbsp;&nbsp;删除</button>"
                        }
                    },
                ]
            });
        })
        function show(index){
            $("#mytable").bootstrapTable("check",index);//根据索引让该行选中
            var a=$("#mytable").bootstrapTable("getSelections")[0];
            var num=a.repertoryNum;
            $("#repertoryName").html(a.repertoryName);
            $("#model").html(a.model);
            $("#color").html(a.repertoryColor);
            $("[name='repertoryId']").val(a.repertoryId);
            $("[name='price']").val(a.presetPrice);
            $("[name='tableId']").val(index);
            if(num<=0){
                swal("错误！", "该库存数量不足", "error");
            }else{
                $("#myModal").modal('show');
            }
        }
        $(function () {//修改框
            <!--校验框架-->
            $('#myform').bootstrapValidator({
                message: 'This value is not valid',
                feedbackIcons: {
                    valid: 'glyphicon glyphicon-ok',
                    invalid: 'glyphicon glyphicon-remove',
                    validating: 'glyphicon glyphicon-refresh'
                },
                fields: {
                    marketNum: {
                        message: 'The username is not valid',
                        validators: {
                            notEmpty: {
                                message: '数量不能为空！'
                            },
                            digits: {
                                message: '字段必须是正整数'
                            },
                            greaterThan: {
                                value: 1,
                                message: '最小输入1'
                            },
                            lessThan: {
                                value: 100,
                                message: '最大输入100'
                            }
                        }
                    }
                }
                });
        });
        function smt() {//添加
            var price=$("[name='price']").val();
            var num=$("[name='marketNum']").val();
            var total=price*num;
            var yinfu=$(".totals").html();//获取到当前应付金额
            var yf=(parseFloat(yinfu)+total).toFixed(2);//获取到新添加的商品金额
            $(".totals").html(yf);//重新赋值
            $("[name='price']").val(yf);
            var sum=$(".nums").html();//获取到总数量
            var sums=parseInt(num)+parseInt(sum);//获取到新添加的数量
            $(".nums").html(sums);//重新给总数量赋值
            $("[name='TotalPrice']").val(total);//给每件的总数量赋值
            //启用较验
            $('#myform').data('bootstrapValidator').validate();
            //验证是否通过true/false
            var flag = $('#myform').data('bootstrapValidator').isValid();
            if (flag) {
                //序列化表单
                var formStr = $('#myform').serialize();
                //处理表单控件的中文乱码
                market = decodeURIComponent(formStr, true);
                $.ajax({
                    type: 'post',
                    url: '/xiaoshou/addmarket',
                    data:market,
                    success: function (data) {
                        //关闭对话框
                        $("#myModal").modal('hide');
                        swal({title:"添加成功",text:"小手一抖就添加成功了！",type:"success"});
                        //重新加载表格
                        $("#xiaoshou").bootstrapTable('load', data);
                        $('#myform')[0].reset();//清空表单的内容
                        $('#myform').data('bootstrapValidator').resetForm();//清空校验
                        $("#mytable").bootstrapTable("uncheck",$("[name='tableId']").val());//取消选中
                    }
                })
            }
        }
        function del(marketId,index) {
            $.ajax({
                type: 'post',
                url: '/xiaoshou/delmarket',
                data:{"marketId":marketId},
                success: function (data) {
                    $("#xiaoshou").bootstrapTable("check",index);//根据索引让该行选中
                    var a=$("#xiaoshou").bootstrapTable("getSelections")[0];
                    var price=a.totalPrice;
                    var sum=a.marketNum;
                    var yinfu=$(".totals").html();//获取到当前应付金额
                    var yf=(parseFloat(yinfu)-price).toFixed(2);//获取到新添加的商品金额
                    $(".totals").html(yf);//重新赋值
                    $("[name='price']").val(yf);
                    var sums=$(".nums").html();//获取到总数量
                    var sumss=parseInt(sums)-sum;//获取到新添加的数量
                    $(".nums").html(sumss);//重新给总数量赋值
                    $("#xiaoshou").bootstrapTable("uncheck",index);//取消选中
                    swal({title:"删除成功",text:"小手一抖就删除成功了！",type:"success"});
                    //重新加载表格
                    $("#xiaoshou").bootstrapTable('load', data);
                }
            })
        }
    </script>
</head>
<body>
<div style="margin-left: 50px;margin-right: 50px">
    <div class="#top" style="margin-top: 10px">
        <div class="col-md-12">
            <form action="" method="post" role="form" class="form-horizontal">
                <div class="form-group col-md-4">
                    <label for="" class="col-md-4 control-label">商品名称:</label>
                    <div class="col-md-8">
                        <input type="text" class="form-control" name="repertoryName" placeholder="可模糊查询">
                    </div>
                </div>

                <div class="form-group col-md-4">
                    <label for="" class="col-md-4 control-label">商品类别:</label>
                    <div class="col-md-8">
                        <select name="typeId" id="inputID" class="form-control k">
                            <option value="0">全部</option>
                        </select>
                    </div>
                </div>
                <div class="form-group col-md-4">
                    <label for="" class="col-md-4 control-label">厂商:</label>
                    <div class="col-md-8">
                        <select name="firmId" id="firm" class="form-control s">
                            <option value="0">全部</option>
                        </select>
                    </div>
                </div>
                <button type="button" class="btn btn-primary btn-info glyphicon glyphicon-search" onclick="cha()">查询</button>
            </form>
        </div><%--搜索框--%>
    </div><%--搜索框--%>
    <table id="mytable" class="table-striped"></table>
    <table id="xiaoshou" class="table-striped"></table>
    <div class="modal inmodal" id="myModal" tabindex="-1" role="dialog" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content animated bounceInRight">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">关闭</span>
                    </button>
                    <i class="fa fa-laptop modal-icon"></i>
                    <h4 class="modal-title">录入信息</h4>
                    <small class="font-bold">客户购买录入信息</small>
                </div>
                <div class="modal-body">
                    <form action="" method="post" role="form" id="myform" class="form-horizontal">
                        <div class="form-group" style="font-size: 15px">
                            <div class="col-md-4">
                                <label for="">商品名称:</label>
                                <label for="" id="repertoryName">oppoK1</label>
                            </div>
                           <div class="col-md-4">
                               <label for="">商品型号:</label>
                               <label for="" id="model">4G+128</label>
                           </div>
                           <div class="col-md-4">
                               <label for="">商品颜色:</label>
                               <label for="" id="color">黑色</label>
                           </div>
                        </div>
                        <div class="form-group">
                            <label class="col-md-2" style="text-align: center">商品数量:</label>
                            <div class="col-md-9">
                                <input type="number" name="marketNum" class="form-control" value="1">
                                <input type="hidden" name="repertoryId" class="form-control">
                                <input type="hidden" name="TotalPrice" class="form-control">
                                <input type="hidden" name="price" class="form-control">
                                <input type="hidden" name="tableId" class="form-control">
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-md-2" style="text-align: center">商品备注:</label>
                            <div class="col-md-9">
                                <textarea class="form-control" name="marketRemark"></textarea>
                            </div>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-white closes">关闭</button>
                    <button type="button" class="btn btn-primary" onclick="smt()">保存</button>
                </div>
            </div>
        </div>
    </div>
    <div class="#buttom">
        <form action="" method="post" id="okform" role="form" class="form-horizontal">
            <div class="form-group">
                <label for="" style="color: red;font-size: 20px" class="col-lg-3">应收金额:￥<span style="color: red;font-size: 20px" class="totals">27592.8</span></label>
                <label for="" style="color: blue;font-size: 20px" class="col-lg-1">总数量:<span class="nums" style="color: blue;font-size: 20px">9</span></label>
            </div>
            <div class="form-group">
                <label class="col-lg-1" style="font-size: 20px; text-align: right">客户名称:</label>
                <div class=" col-lg-1">
                    <input type="text" class="form-control" name="username" placeholder="客户名称">
                </div>
                <label class="col-lg-1" style="font-size: 20px; text-align: right">预留号码:</label>
                <div class=" col-lg-2">
                    <input type="text" class="form-control" name="iphoneNum" placeholder="手机号码">
                </div>
                <label class="col-lg-1" style="font-size: 20px; text-align: right">支付方式:</label>
                <div class=" col-lg-1">
                    <select name="zf" class="form-control zf">
                    </select>
                </div>
                <label for="" style="color: red;font-size: 20px; text-align: right" class="col-lg-1">实付金额:</label>
                <div class=" col-lg-1">
                    <input type="text" name="price" class="form-control" placeholder="" >
                </div>
                <button type="button" onclick="shopping()" class="btn btn-primary">保存</button>
            </div>
        </form>
    </div>
   <%-- <div class="modal fade" id="shenhe">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                    <h4 class="modal-title">审核</h4>
                </div>
                <div class="modal-body">
                    <fieldset>
                        <legend style="font-size: 13px">
                            设置单据状态
                        </legend>
                        <center>
                            <input type="radio" name="save" value="1" checked="checked"><label for="rbpass">已审核状态</label>
                            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                            <input type="radio" name="save" value="2"><label for="rbunpass">未审核状态</label>
                            <input type="hidden" name="dengji" value="${ad.position.positionName}">
                        </center>

                    </fieldset>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                    <button type="button" onclick="smts()" class="btn btn-primary">保存</button>
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal-dialog -->
    </div><!-- /.modal -->--%>
</div>
<script>
    function smts() {//审核表录入信息
        var totals=$(".totals").html();//应付金额
        var nums=$(".nums").html();//总数量
        var price=$("[name='price']").val();//实付金额
        var username=$("[name='username']").val();//客户名称
        var iphoneNum=$("[name='iphoneNum']").val();//客户电话
        var dengji=$("[name='dengji']").val();//等级判断
        var zf=$("[name='zf']").val();//支付方式
            $.ajax({
                url:"/xiaoshou/success",
                data:{"radio":1,"totals":totals,"nums":nums,"price":price,"userName":username,"iphoneNum":iphoneNum,"zf":zf},
                type:"post",
                success:function(ks){
                    $("#xiaoshou").bootstrapTable("load",ks);
                   $("[name='iphoneNum']").val("");//客户电话
                     $("[name='username']").val("");//客户名称
                    $(".totals").html("0.00");//应付金额
                    $("[name='price']").val("0.00");
                    $(".nums").html("0");
                    $('#okform').data('bootstrapValidator').resetForm();
                    var opts = $("#mytable").bootstrapTable("getOptions") ;
                    var repertoryName=$("[name='repertoryName']").val();
                    var typeId=$("[name='typeId']").val();
                    var firmId=$("[name='firmId']").val();
                    var limit = opts.pageSize ;
                    var offset = (opts.pageNumber-1) * limit;
                    $.ajax({
                        url:"/kucun/showRepertory",
                        type:"post",
                        data:{"repertoryName":repertoryName,"typeId":typeId,'firmId':firmId,'limit':limit,'offset':offset},
                        success:function(data){
                            $("#mytable").bootstrapTable("load",data);
                        }
                    })
                    $("#shenhe").modal('hide');
                }
            })

    }
</script>
<style>
    fieldset {
        color: #333;
        border: #52915e solid 1px;
        padding: 10px;
    }
    legend{
        width: 80px;
        border-bottom: 0px;
    }
</style>
<script>
    $(function () {
        <!--校验框架-->
        $('#okform').bootstrapValidator({
            message: 'This value is not valid',
            feedbackIcons: {
                valid: 'glyphicon glyphicon-ok',
                invalid: 'glyphicon glyphicon-remove',
                validating: 'glyphicon glyphicon-refresh'
            },
            fields: {
                username: {
                    validators: {
                        notEmpty: {
                            message: '客户姓名不能为空！'
                        },
                    },
                },
                    iphoneNum: {
                        validators: {
                            notEmpty: {
                                message:'手机号码不能为空！'
                            },
                            regexp: {
                                regexp: /^(13[0-9]{9})|(18[0-9]{9})|(14[0-9]{9})|(17[0-9]{9})|(15[0-9]{9})$/,
                                message: '请填写正确的手机号码'
                            }
                        }
                    },
                }

        });
    });
    function shopping(){

        //启用较验
        $('#okform').data('bootstrapValidator').validate();
        //验证是否通过true/false
        var flag = $('#okform').data('bootstrapValidator').isValid();
        if(flag){
            var nums=parseInt($(".nums").html());
            if(nums<=0){
                swal({title:"错误!",text:"请选择商品",type:"error"});
            }else{
                smts();
            }
        }
    }
    $(function(){//关闭所有的模态框
        $(".totals").html("0.00");
        $(".nums").html("0");
        $(".closes").on("click",function () {
            //关闭对话框
            $("#myModal").modal('hide');
            //清空表单
            $('#myform')[0].reset();
            $("#mytable").bootstrapTable("uncheck",$("[name='tableId']").val());//取消选中
        })
        $.ajax({
            url:"/bm/showbm",
            type:"post",
            success:function(data){
                $.each(data,function(){
                    var adds=$("<option value='"+this.bmId+"'>"+this.bmName+"</option>");
                    $(".zf").append(adds);
                });
            }
        })
    })
</script>
<%--双击事件--%>
<script>
    // 双击表格一行事件
    $(document).on('dblclick', '#mytable tbody tr', function () {
        // 当前的tr
        var trElem = $(this);
        // 当前tr的index
        var index = trElem.data('index');
        // 找到这个table的view
        var tableView = trElem.parents('#mytable').first();
        // do something
        show(index);
    });
</script>
</body>
</html>
